<template>
	<div>
		<el-upload class="csde" :http-request="Pictures" action="#" :show-file-list="false"> </el-upload>
		<QuillEditor :style="heights" ref="myQuillEditor" v-model:content="article" theme="snow" :options="editorOption" contentType="html" />
	</div>
</template>
<script>
	import { fileUploadRequest } from '@/api/api'
	import { QuillEditor } from '@vueup/vue-quill'
	import Quill from 'quill'
	import hljs from 'highlight.js'
	import { ref } from 'vue'
	export default {
		name: 'dexedi',
		props: ['height', 'width'],
		computed: {
			heights() {
				return {
					height: this.height,
					width: this.width,
				}
			},
		},
		components: {
			// 组件
			QuillEditor,
		},
		data() {
			return {
				//返回值
				article: '',
				//返回值
				editorOption: {
					modules: {
						toolbar: {
							container: [
								{
									align: [],
								},
								'code-block',
								'image',
							], // toggled buttons
							handlers: {
								image: () => {
									document.querySelector('.el-upload__input').click()
								},
							},
						},
						syntax: {
							highlight: text => {
								return hljs.highlightAuto(text).value // 这里就是代码高亮需要配置的地方}}
							},
						},
					},
				},
			}
		},
		methods: {
			// 父组建获取子组建函数示例
			// <dexedi height="100px" ref="child"></dexedi>
			// let value = this.$refs..dchildelta()
			delta() {
				const contents = this.$refs.myQuillEditor.editor.__quill.getContents()
				const article = this.article

				// Resetting article to an empty string (if this is intended)
				this.article = ''
				console.log('1', this.article)
				console.log(contents, article)
				return [contents, article]
			},
			setdelta(ele = '') {
				if (ele) {
					this.article = ele
				} else {
					this.article = ''
				}
			},
			async Pictures(obj) {
				// 上传图片
				let quill = this.$refs.myQuillEditor.editor.__quill
				let arr = await fileUploadRequest(obj, quill)
				if (arr) {
					this.$message({
						showClose: true,
						message: '上传成功',
						type: 'success',
					})
					this.$parent.edi_art(this.article)
				} else {
					this.$message({
						showClose: true,
						message: '上传失败',
						type: 'error',
					})
				}
			},
		},
		mounted() {
			// 生命周期:
		},
	}
</script>
<style>
	.csde {
		position: absolute;
		top: -200px;
	}
</style>
